<!--
@description: 复杂表格实现
修改表头 header-cell-class-name
修改表体 cell-class-name

还有就是动态表格的部分，可以通过 scope.$index 判断当前所在行数
如果你需要判断当前所在列数，可以通过 v-for 中的 index 进行判断

-->

<template>
  <div style="padding: 20px;">
    <el-table :data="tableData" border :header-cell-style="head" :span-method="objectSpanMethod"
      :cell-class-name="tableCellClassName" :header-cell-class-name="tableHeaderCellClassName">
      <el-table-column>
        <template #header>
          <div class="first-head">
            <div class="month">月份</div>
            <div class="line"></div>
            <div class="arg">参数</div>
          </div>
        </template>
        <el-table-column prop="arg1" width="100" align="center" />
        <el-table-column prop="arg2" width="100" align="center" />
      </el-table-column>
      <el-table-column v-for="(item, index) in tableHead" :key="index" :label="item" :prop="item" align="center">
        <template #default="scope">
          <div class="p-x-10px">{{ scope.$index < 2 ? scope.row[item] : '72' }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const tableHead = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const tableData = ref([
  {
    arg1: '目标',
    arg2: '季度目标',
    '1月': 1,
    '2月': 2,
    '3月': 3,
    '4月': 4,
    '5月': 5,
    '6月': 6,
    '7月': 7,
    '8月': 8,
    '9月': 9,
    '10月': 10,
    '11月': 11,
    '12月': 12
  },
  {
    arg1: '目标',
    arg2: '月度目标',
    '1月': 1,
    '2月': 2,
    '3月': 3,
    '4月': 4,
    '5月': 5,
    '6月': 6,
    '7月': 7,
    '8月': 8,
    '9月': 9,
    '10月': 10,
    '11月': 11,
    '12月': 12
  },
  {
    arg1: '总销售额',
  },
])
// 表头处理
const head = ({ row, column, rowIndex, columnIndex }) => {
  //这里为了是将第二行的表头隐藏，就形成了合并表头的效果
  if (rowIndex === 1) {
    return { display: 'none', padding: 0 }
  }
}
/**
 * 合并处理
 * 行列合并使用到了 span-method 这样的一个方法绑定 objectSpanMethod
 * 其中，return [合并的行数，合并的列数]，return [0, 0] 隐藏单元格
 * 修改单元格样式，主要是通过注入类名，从而达到覆盖原有样式的效果，主要分两个部分
 */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 第一列，第一二行
  if (columnIndex === 0 && rowIndex < 2) {
    // 第一行，将第一二列单元格行合并
    if (rowIndex === 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    }
    else { // 其他这个范围内的单元格隐藏
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
  // 第一行 2 5 8 11
  if (rowIndex === 0) {
    // 从第二列开始，每隔3列合并
    if (columnIndex > 1 && columnIndex % 3 === 2) {
      return {
        rowspan: 1,
        colspan: 3
      }
    }
    else if (columnIndex > 1) { // 从第二列开始，其他不合并的都隐藏
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
  // 第三行
  if (rowIndex === 2) {
    // 第1，2列合并
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 3) { // 第三列合并为 12列
      return [1, 12]
    } else {// 第三列开始都隐藏
      return [0, 0]
    }
  }
}
// 单元格样式处理
// 表格内容
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0 && columnIndex === 0) {
    return 'warning'
  }
  if (rowIndex === 2 && columnIndex === 0) {
    return 'success'
  }
}
// 表头
const tableHeaderCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0 && columnIndex === 0) {
    return 'header'
  }
}
</script>

<style>
.line {
  width: 100%;
  background-color: #ebeef5;
  height: 1px;
  transform: rotate(16deg);
}

.month {
  margin-left: 110px;
}

.arg {
  margin-left: 40px;
}

.el-table .warning {
  background-color: #fef0f0;
}

.el-table .success {
  background-color: #faf7f2;
}

.el-table .header {
  background-color: #ecf5ff !important;
}
</style>
